<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common2::common(title='库')">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>

</head>
<style type="text/css">
body {
	margin: 0;
	background-color: #F8F8F8;
	height:500px;
}

.el-header, .el-footer {
	background-color: #545c64;
	color: white;
	text-align: center;
	line-height: 60px;
}
.box-card {
	 min-height:500px;
 }
.content{
	background-color: #545c64;
}
.el-tree{
	background-color: #EBEEF5;
}
.el-table__row:hover   {cursor:pointer;}
.cursor:hover   {cursor:pointer;}
.cursorLine:hover   {cursor:pointer;text-decoration:underline;}
.selectedModule {background-color: #E8E8E8;border-radius:3px;}
.projectDialog{
margin-left:0;width:250px;min-height:600px;
}
.caseDialog{
margin-right:0;width:420px;min-height:500px;
}
li {list-style-type:none;}
.lidiv{
	cursor:pointer;
	padding:5px;
}
.lidiv:hover {cursor:pointer;text-decoration:underline;}
.bullet{
	background: url("../../images/bullet.svg") no-repeat;
	background-position:left center;
}
</style>
<script type="text/javascript" th:src="@{/js/frontend/testcase/caseLibrary.js?v=2}"></script>
<body>
	<div id="app">
		<input type="hidden" id="libraryCode" th:value="${libraryCode}">
		<input type="hidden" id="libraryName" th:value="${libraryName}">
		<el-container> 
			<el-header> 
				<el-menu
					:default-active="1" class="el-menu-demo" mode="horizontal"
					background-color="#545c64" text-color="#fff"
					active-text-color="#ffd04b">
					<el-submenu index="1">
						<template slot="title"><span sec:authentication="principal.nickName"></span></template>
						<el-menu-item index="1-1" @click="goFrontend">首页</el-menu-item>
						<el-menu-item index="1-2" @click="goBackend">管理后台</el-menu-item>
					</el-submenu>
				</el-menu> 
			</el-header>
			<el-container> 
				<el-aside width="250px" style="padding:20px;">
					<el-row style="height:30px;margin-bottom:10px;">
						<el-col :span="4" class="cursor">
							<i class="el-icon-menu" @click="showProjectMenu"></i>
						</el-col>					
						<el-col :span="16">{{libraryNameShow}}</el-col>					
						<el-col :span="4" class="cursor">
							<el-popover
							  placement="bottom"
							  width="160"
							  >
							  <p class="cursorLine" @click="updateProject">编辑信息</p>
							  <p class="cursorLine" style="color:red;margin-top:10px" @click="deleteProject">删除用例库</p>
							  <i class="el-icon-setting" slot="reference"></i>
							</el-popover>
						</el-col>					
					</el-row>
					<hr>
					<el-row style="height:15px;margin:10px 0 10px 0">
						<el-col :span="20" style="color:#909399;">功能模块</el-col>					
						<el-col :span="4" class="cursor"><i class="el-icon-circle-plus" @click="doAddModule"></i></el-col>					
					</el-row>
					<div >
						<ul style="margin:0;padding:10px;font-size:15px;">
							<li>
								<div class="lidiv" :class="{'selectedModule':selectedModuleIndex ==-1 }" @click="clickModule(null,-1)">
									<i class="el-icon-tickets"></i>&nbsp;&nbsp;所有用例
								</div>
							</li>
							<li v-for="(module,index) in moduleData" :class="{'selectedModule':index ==selectedModuleIndex }" @click="clickModule(module,index)" v-on:mouseenter='hoverModuleIndex=index' v-on:mouseleave="hoverModuleIndex=-1">
								<div class="lidiv">
									<span class="bullet">&nbsp;&nbsp;&nbsp;</span>
									<span>&nbsp;&nbsp;{{module.name}}({{module.caseCount}})</span>
									<el-popover
									  placement="bottom"
									  width="160"
									  style="float:right"
									  >
									  <p class="cursorLine" @click="doUpdateModule(module)">重命名</p>
									  <p class="cursorLine" style="color:red;margin-top:10px" @click="doDeleteModule(module)">删除</p>
									  <i class="el-icon-more" slot="reference" v-show="index == hoverModuleIndex"></i>
									</el-popover>
								</div>
							</li>
							<li :class="{'selectedModule':selectedModuleIndex ==-2 }" @click="clickModule(emptyModule,-2)"  v-on:mouseenter='hoverModuleIndex=-2'>
								<div class="lidiv">
									<span>无所属模块(ID:0)</span>
								</div>
							</li>
						</ul>
					</div>
				</el-aside>
    			<el-main>
	    			<el-card class="box-card">
						<div slot="header">
							<div style="padding-bottom:10px;">
						    	<span><i class="el-icon-tickets"></i> 所有用例</span>
						    	<el-button style="float: right;" type="primary" size="small" @click="doAddCase">新建用例</el-button>
						    </div>
						    <hr>
							<div>
						    	<el-button size="small" @click="openTaskDialog" :disabled="selectedCase.length==0">关联到任务</el-button>
						    	<el-button size="small" @click="doDeleteCase" :disabled="selectedCase.length==0">删&nbsp;&nbsp;除</el-button>
						    </div>
						</div>
					  	<div style="margin:10px;">
				    	  <el-table
				    	  	ref="caseLibraryDatagrid" 
				    	    :data="caseDatagrid"
						    tooltip-effect="dark"
						    style="width: 100%;"
						    :cell-style="tableCellStyle"
						    @row-click="datagridClick"
						    @row-dblclick="datagridDbclick"
						    @selection-change="handleSelectionChange"
						    border
						    highlight-current-row >
				    	  	   <el-table-column type="selection" min-width="30" fixed></el-table-column>
				    	  	   <el-table-column type="index" min-width="30" fixed>序号</el-table-column>
							   <el-table-column prop="moduleName" label="所属模块" width="100" show-overflow-tooltip> </el-table-column>
							   <el-table-column prop="type" label="用例类型" width="100" show-overflow-tooltip> </el-table-column>
							   <el-table-column prop="level" label="优先级" width="80" show-overflow-tooltip> </el-table-column>
							   <el-table-column prop="title" label="用例标题" > </el-table-column>
							   <el-table-column prop="prerequisite" label="前提条件" > </el-table-column>
							   <el-table-column prop="caseSteps" label="用例步骤" > </el-table-column>
							   <el-table-column prop="expectedResult" label="预期结果" > </el-table-column>
							   <el-table-column prop="createByName" label="创建人" show-overflow-tooltip> </el-table-column>
						  </el-table>
						</div>
						<div style="margin:10px">
						    <el-pagination
						      :current-page="queryCaseData.page"
						      :page-sizes="[50, 80, 100]"
						      :page-size="queryCaseData.rows"
						      layout="total, sizes, prev, pager, next, jumper"
						      :total="totalNum"
						      @size-change="handleSizeChange"
						      @current-change="handleCurrentChange"
						      @prev-click="handlePrevClick"
						      @next-click="handleNextClick">
						    </el-pagination>
						 </div>
					</el-card>
    			</el-main>
			</el-container>
		</el-container>
		<el-dialog :visible.sync="dialogConfig.taskDialogVisible" center="true" width="400px" title="选择任务">
			<div slot="footer">
				<div style="margin-bottom:40px;">
				  <el-select v-model="selectedTask" @change="queryTaskGroup" filterable placeholder="请选择任务">
				    <el-option
				      v-for="item in taskDatas"
				      :key="item.id"
				      :label="item.name"
				      :value="item.id">
				    </el-option>
				  </el-select>
				 </div> 
				 <div style="margin-bottom:40px;">
				  <el-select v-model="selectedTaskGroup" filterable placeholder="请选择分组">
				    <el-option
				      v-for="item in taskGroupDatas"
				      :key="item.id"
				      :label="item.name"
				      :value="item.id">
				    </el-option>
				  </el-select>
				</div>
		    	<el-button @click="openCloseDialog('taskForm',false)">取 消</el-button>
		   		<el-button type="primary" @click="joinTask">确 定</el-button>
		    </div>
		</el-dialog>
		<el-dialog :visible.sync="dialogConfig.projectDialogVisible" top="9vh" custom-class="projectDialog" :modal="false">
			<el-button type="text" icon="el-icon-d-arrow-left" @click="goFrontend">&nbsp;首&nbsp;&nbsp;页&nbsp;</el-button>
			<el-table :data="porjectDatagird" @row-click="projectDatagridSelect">
			    <el-table-column property="name" label="用例库"></el-table-column>
			 </el-table>
		</el-dialog>
		<el-dialog :visible.sync="dialogConfig.projectAddDialogVisible" center="true">
			<el-form :model="addProject" ref="projectAddForm" :rules="rules" @submit.native.prevent>
				<el-form-item label="用例库名称" prop="name" 
		      		:label-width="dialogConfig.formLabelWidth">
			      <el-input v-model="addProject.name"  auto-complete="off" style="width:220px;"></el-input>
			    </el-form-item>
			    <div style="padding-left:150px;">
			    	<el-button @click="openCloseDialog('projectAddForm',false)">取 消</el-button>
			   		<el-button type="primary" @click="submitForm('projectAddForm')">确 定</el-button>
			    </div>
			</el-form>
		</el-dialog>
		<el-dialog :visible.sync="dialogConfig.moduleAddDialogVisible" center="true">
			<el-form :model="addModule" ref="moduleAddForm" :rules="rules" @submit.native.prevent>
				<el-form-item label="模块名" prop="name" 
		      		:label-width="dialogConfig.formLabelWidth">
			      <el-input v-model="addModule.name"  auto-complete="off" style="width:220px;"></el-input>
			    </el-form-item>
			    <div style="padding-left:150px;">
			    	<el-button @click="openCloseDialog('moduleAddForm',false)">取 消</el-button>
			   		<el-button type="primary" @click="submitForm('moduleAddForm')">确 定</el-button>
			    </div>
			</el-form>
		</el-dialog>
		<el-dialog :visible.sync="dialogConfig.caseAddDialogVisible" append-to-body="true"  top="9vh"  center="true" custom-class="caseDialog" :modal="false" :close-on-press-escape="true">
			<el-form :model="addCase" ref="caseAddForm" :rules="rules" @submit.native.prevent>
				<el-form-item label="所属用例库" prop="libraryName" :label-width="dialogConfig.formLabelWidth">
			        <el-select v-model="addCase.libraryCode" placeholder="请选择用例库" @change="libraryChange">
					    <el-option
					      v-for="item in porjectDatagird"
					      :key="item.id"
					      :label="item.name"
					      :value="item.id">
					    </el-option>
					 </el-select>
			    </el-form-item>
		      	<el-form-item label="所属模块名" prop="moduleCode" 
		      		:label-width="dialogConfig.formLabelWidth">
			      	<el-select v-model="addCase.moduleName" placeholder="请选择用例库" @change="moduleChange">
					    <el-option
					      v-for="item in moduleSelectData"
					      :key="item.id"
					      :label="item.name"
					      :value="item.name">
					    </el-option>
					 </el-select>
			    </el-form-item>
			    <el-form-item label="用例类型" prop="type" 
		      		:label-width="dialogConfig.formLabelWidth">
			      	<el-select v-model="addCase.type" clearable placeholder="请选择用例库">
					    <el-option
					      v-for="item in typeData"
					      :key="item.itemName"
					      :label="item.itemName"
					      :value="item.itemName">
					    </el-option>
					 </el-select>
			    </el-form-item>
		      	<el-form-item label="优先级" prop="level" 
		      		:label-width="dialogConfig.formLabelWidth">
			      	<el-select v-model="addCase.level" clearable placeholder="请选择用例库">
					    <el-option
					      v-for="item in levelData"
					      :key="item.itemName"
					      :label="item.itemName"
					      :value="item.itemName">
					    </el-option>
					 </el-select>
			    </el-form-item>
			    <el-form-item label="标题" prop="title" 
			      		:label-width="dialogConfig.formLabelWidth">
				      <el-input v-model="addCase.title"  auto-complete="off" style="width:220px;"></el-input>
			    </el-form-item>
		      	<el-form-item label="前提条件" prop="prerequisite" 
		      		:label-width="dialogConfig.formLabelWidth">
			      <el-input v-model="addCase.prerequisite" type="textarea" :autosize="{ minRows: 5}" auto-complete="off" style="width:220px;"></el-input>
			    </el-form-item>
		      	<el-form-item label="用例步骤" prop="caseSteps" 
		      		:label-width="dialogConfig.formLabelWidth">
			      <el-input v-model="addCase.caseSteps" type="textarea" :autosize="{ minRows: 5}" auto-complete="off" style="width:220px;"></el-input>
			    </el-form-item>
		      	<el-form-item label="预期结果" prop="expectedResult" 
		      		:label-width="dialogConfig.formLabelWidth">
			      <el-input v-model="addCase.expectedResult" type="textarea" :autosize="{ minRows: 5}" auto-complete="off" style="width:220px;"></el-input>
			    </el-form-item>
		      	<el-form-item label="排序号" prop="orderIndex" 
		      		:label-width="dialogConfig.formLabelWidth">
		      		<el-input-number v-model="addCase.orderIndex"></el-input-number>
			    </el-form-item>
		        <div style="padding-left:150px;">
			    	<el-button @click="openCloseDialog('caseAddForm',false)">取 消</el-button>
			   		<el-button type="primary" @click="submitForm('caseAddForm')">确 定</el-button>
			    </div>
		    </el-form>
		</el-dialog>
	</div>
</body>
</html>